<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科泰聊天室</title>
  <link href="css/chat.css" rel="stylesheet">
  </link>
</head>
<body>
  <!-- TODO 根据HTML结构分析，定义出父组件和子组件结构 -->
  <div id="app">
    <h1 class="title center">科泰聊天室</h1>
    <fu></fu>
  </div>
  <template id="fu">
	  <div class="chat-window center">
	    <div class="chat-messages" >
			<div v-for="obj in newsArray" :type="obj.type" :avatar="obj.avatar" :content="obj.content">
	      <div class="message received-message" v-if="obj.type == 'received'">
	        <div class="message-received"><img :src="obj.avatar" class="avatar"> <span
	            class="message-content">{{obj.content}}</span></div>
	      </div>
		  <div class="message sent-message" v-else>
		    <div class="message-sent"><span class="message-content">{{obj.content}}</span> <img :src="obj.avatar"
		        class="avatar"></div>
		  </div>
	    </div>
		</div>
	    <zi @ff="ff"></zi>
	  </div>
  </template>
  
  <template id="zi"><div class="chat-input"><input v-model="xx" type="text" placeholder="请输入消息..."> <button @click="fs()">发送</button></div></template>
  
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
  <script>
	
	// TODO 将实战2写死的聊天记录，改为Axios请求data/chat-history.json 中的聊天记录数据
	  
    // TODO 根据HTML结构分析，定义出父组件和子组件结构
	
	const zi={
		template:'#zi',
		data(){
			return{
			xx:'',
			}
		},
		methods:{
			fs(){
				this.$emit("ff",this.xx)
			}
		}
	}
	const fu={
		template:'#fu',
		components:{
			"zi":zi
		},
		methods:{
			ff(xx){
				console.log(xx);
				this.newsArray.push({
    "type": "sent",
    "avatar": "images/avt-02.png",
    "content": xx
  })
			},
			loadNewsList(){
				axios.get('data/chat-history.json',{
					
				})
				.then(response =>{
					this.newsArray=response.data;
				})
			}
		},
		data(){
			return{
				newsArray:[]
			}
		},
		created(){
			this.loadNewsList();
		}
	}
	const app=new Vue({
		el:'#app',
		components:{
			'fu':fu
		}
	})
  </script>
</body>

</html>